/*
* @Author: yuanxiang 
* @Date: 2018-05-09 16:02:11 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-09-18 14:34:08
*/
<template>
<bg-lay-out :hideTopBar="true" :widthSize="true" :hideMarginLeft="true" :background="'#161431'" :hideMask="true">
  <div slot="main" class="components-container qyyx-Main">
    <p class="z_topTitleCon">
      <span class="z_topTitle">全员营销统计</span>&nbsp;&nbsp;
      <span class="dateCircle">
          <el-date-picker :editable="false" :clearable="false" @change="dateChange()" v-model="month" type="month" placeholder="选择月" class='week-con'>
          </el-date-picker>
      </span>
    </p>
    <div class='chart-container'>
      <el-row :gutter="20" style="padding-bottom:2em"> 
        <el-col class="zdgzTable quyxTable tableCon" :xs="24" :sm="24" :md="24" :lg="24">
          <el-table 
            :data="partnerData" 
            :row-class-name="tableRowClassName" 
            header-row-class-name="myHeadRow" 
            header-cell-class-name="myHeaderCell"
            :cell-class-name="tableCellClassName" 
            class="myTableCss">
            <el-table-column align="center" prop="plateName" label="渠道" width="120">
            </el-table-column>
            <el-table-column width="100" align="center" prop="proportion" label="比例">
            </el-table-column>
            <el-table-column align="center" class-name="successCon" prop="offlineTransactionNum" width="130" label="共享营销下线成交套数">
            </el-table-column>
            <el-table-column class-name="info-row" align="center" width="110" prop="baseSellingAmount" label="保底销售额(万)">
            </el-table-column>
            <el-table-column prop="baseSellingNum" align="center" width="110" label="保底销售量(套)">
            </el-table-column>
            <el-table-column class-name="okNumCon" prop="dealNum" align="center" width="90" label="成交量">
            </el-table-column>
            <el-table-column prop="dealAmount" align="center" width="90" label="销售额(万)">
            </el-table-column>
            <el-table-column prop="dealProportion" width="90" align="center" label="成交比例">
            </el-table-column>
            <el-table-column prop="statisticsNum" width="90" align="center" label="统计量">
            </el-table-column>
            <el-table-column prop="theDifference" width="130" align="center" label="统计量与保底销量差异">
            </el-table-column>
            <el-table-column prop="statisticsProportion" align="center" width="90" label="统计比例">
            </el-table-column>
            <el-table-column class-name="otherCon" min-width="130" align="center" header-align="center" label="备注(本月成交名单)">
              <template slot-scope="scope">
                <span :class="item.isCurrentWeekAdded == true ? 'emphasisName':'name'" :key="index" v-for="(item,index) in scope.row.newRemarkArr"
                  :style="{color: item.isCurrentWeekAdded == true ? 'cyan':'while'}">{{item.name}}
                  <i v-if="index != scope.row.newRemarkArr.length-1" style="color:while"> , </i>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="padding:0.5rem;margin-bottom: 5em;">
        <div>
          <el-radio-group class="radioBtnBlue" @change="fetchData"  v-model="activeName">
          <el-radio-button label="0">销量</el-radio-button>
          <el-radio-button label="1">销售额</el-radio-button>
          <el-radio-button label="2">销售比例</el-radio-button>
        </el-radio-group>
        </div>
        <div v-if="emptyData">
          <chart  v-if="activeName === '0'"  :option="partnerOption" />
          <chart  v-if="activeName === '1'"  :option="saleMoneyOption" />
          <el-row v-if="activeName === '2'" :gutter="20" style="display:flex;align-items:center;padding-bottom:2.5rem">
              <el-col :xs="8" :sm="8" :md="8" :lg="8" >
                <pie-chart chartStyle="min-height:300px" v-model="pieOption" :option="myPieOption"></pie-chart>
              </el-col>
              <el-col :xs="16" :sm="16" :md="16" :lg="16">
                <bar-charts style="min-height:500px;" v-model="saleChartArr" chartStyle="'min-height:230px;height:600px'" :option="sellValueOption"></bar-charts>
              </el-col>
          </el-row>
        </div>
        <el-row v-else :gutter="20" style="padding:10px 8px 10px 0;text-align: center;">
              <span class="el-table__empty-text" style="font-size:20px;color: #ccc;">暂无数据</span>
        </el-row>
      </el-row>
    </div>
  </div>
</bg-lay-out>
</template>

<script>
import bgLayOut from "@/components/bgLayOut/index";
import chart from "../../../../../components/Charts/newChart";
import barCharts from "@/components/Charts/barCharts";
import pieChart from "@/components/Charts/pieChart";
import echarts from "echarts";
import { GetList } from "@/api/keyJob/index";
export default {
  data() {
    return {
      myPieOption: {
        legend: {
          bottom: "8%"
        }
      },
      sellValueOption: {
        hideLineColor: true,
        color: ["#0c43fd", "#da34fb"],
        grid: {
          bottom: "23%"
        },
        markLine: {
          label: {
            normal: {
              formatter: "",
              textStyle: {
                fontSize: 14,
                color: "#41f1c9"
              }
            }
          },
          lineStyle: {
            normal: {
              type: "dashed",
              color: "#41f1c9",
              width: 4
            }
          },
          data: [
            {
              name: "时间进度",
              type: "max"
            }
          ]
        }
      },
      remarkTime: "",
      allSaleData: [],
      pickerOption: {
        firstDayOfWeek: 1
      },
      saleChartArr: [], // 销售比例
      week: new Date(),
      partnerOption: {}, // 销量
      parnerLegend: ["保底销量", "成交销量", "统计量", "统计量与保底销量差异"],
      saleMoneyOption: {}, // 销售额
      saleMoneyLegend: ["保底销售额", "实际销售额"],
      saleScaleOption: {}, // 销售比例
      pieOption: [],
      activeName: "0",
      myChart: null,
      myChart1: null,
      myChart2: null,
      saleOption: {}, // 销量
      partnerData: [],
      month: new Date(),
      scheduleNum: "",
      emptyData: true,
      chartsColor: {}
    };
  },
  components: {
    bgLayOut,
    chart,
    barCharts,
    pieChart
  },
  methods: {
    // unit:单位  startColor:开始的颜色  endColor:结束的颜色
    setSaleOption(res, optionName, unit) {
      var xData = [];
      var xDataName = [
        "保底成交量",
        "成交销量",
        "统计量",
        "统计量与保底量差异"
      ];
      var allData = [];
      var symbolClip = true;
      var max = 0;
      var length = 4;
      var legend = [];
      for (let i = 0; i < length; i++) {
        let data = {
          type: "bar",
          name: "",
          label: {
            normal: {
              show: true,
              color: "#31cee6",
              position: "top",
              textStyle: {
                fontWeight: "bold",
                fontFamily: "DIN Condensed Bold",
                fontSize: "22"
              }
            }
          },
          z: 10,
          //  symbolBoundingData: max,
          data: [],
          barWidth: 21
        };
        var legendItem = {
          name: "",
          textStyle: {
            color: "#31cee6",
            fontSize: 14,
            padding: [0, 10]
          }
        };
        data.name = xDataName[i];
        legendItem.name = xDataName[i];
        legend.push(legendItem);
        allData.push(data);
      }
      allData.forEach((dataItem, itemId) => {
        res.forEach((resItem, resId) => {
          if (itemId === 0) {
            xData.push(resItem.plateName);
          }
          switch (itemId) {
            case 0: // 保底成交量
              dataItem.data.push(
                resItem.baseSellingNum === null ? 0 : resItem.baseSellingNum
              );
              break;
            case 1: // 成交销量
              dataItem.data.push(
                resItem.dealNum === null ? 0 : resItem.dealNum
              );
              break;
            case 2: // 统计量
              dataItem.data.push(
                resItem.statisticsNum === null ? 0 : resItem.statisticsNum
              );
              break;
            default:
              // 统计量与保底量差异
              dataItem.data.push(
                resItem.theDifference === null ? 0 : resItem.theDifference
              );
              break;
          }
        });
      });
      var option = {
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 45,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        yAxis: {
          name: unit,
          nameGap: 30,
          nameTextStyle: {
            color: "#31cee6"
          }
        },
        legend: {
          data: legend,
          selected: {
            统计量与保底量差异: false
          },
          orient: "horizontal",
          top: "95%"
        },
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          formatter: params => this.$utils.formatterLine(res, params, unit)
        },
        grid: {
          bottom: "20%",
          left: "5%"
        },
        series: allData
      };
      this.$set(this, optionName, option);
    },
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 4 || columnIndex === 8) {
        return "myCellConBlue";
      } else if (columnIndex === 9) {
        return "myCellConRed";
      } else {
        return "myCellCon";
      }
    },
    tableRowClassName(row, index) {
      if (row.row.plateName === "小计") {
        return "my-row-tag";
      } else if (row.row.plateName === "总计") {
        return "my-row-tag";
      } else {
        return "my-table-row";
      }
    },
    dateChange() {
      this.emptyData = true;
      this.fetchData();
    },
    // 请求数据
    async fetchData() {
      try {
        var self = this;
        var month = new Date(this.month).getMonth() + 1;
        var year = new Date(this.month).getFullYear();
        var allDays = new Date(year, month, 0).getDate();
        var endTime = year + "-" + month + "-" + allDays;
        var startTime = year + "-" + month + "-" + "1";
        var params = {
          beginTime: startTime,
          endTime: endTime
        };
        var res = await GetList(params);
        var data = res.data.result;
        if (data.length <= 0) {
          this.partnerData = [];
          this.emptyData = false;
          return;
        }
        self.solveData(data);
      } catch (error) {
        console.log(error);
      }
    },
    solveData(data) {
      var d = data[data.length - 1].remark;
      this.scheduleNum = d.slice(d.indexOf("：") + 1, d.length - 1);
      for (var i = 0; i < data.length; i++) {
        data[i].remarkArr = data[i].remark.split(/，|,/);
        data[i].currentWeekAddedArr = data[i].currentWeekAdded.split(/，|,/);
        data[i].newRemarkArr = [];
        for (var j = 0; j < data[i].remarkArr.length; j++) {
          data[i].newRemarkArr[j] = {};
          for (var k = 0; k < data[i].currentWeekAddedArr.length; k++) {
            if (data[i].remarkArr[j] == data[i].currentWeekAddedArr[k]) {
              data[i].newRemarkArr[j].isCurrentWeekAdded = true;
            }
          }
          data[i].newRemarkArr[j].name = data[i].remarkArr[j];
        }
      }
      this.$set(this, "partnerData", data);
      this.$set(
        this.sellValueOption.markLine.label.normal,
        "formatter",
        data[data.length - 1].remark
      );
      if (this.activeName === "0") {
        // 销量图表
        this.setSaleOption(data, "partnerOption", "套");
      } else if (this.activeName === "1") {
        // 销售额图表
        this.setSaleMoneyOption(data, "saleMoneyOption", "万元");
      } else {
        this.setPieOption(data);
        var objArr = [
          {
            name: "统计比例",
            list: [],
            value: 0
          },
          {
            name: "成交比例",
            list: [],
            value: 0
          }
        ];
        for (var i = 0; i < data.length; i++) {
          var dataObj1 = {
            name: data[i].plateName,
            value: Number(data[i].statisticsProportion.split("%")[0])
          };
          var dataObj2 = {
            name: data[i].plateName,
            value: Number(data[i].dealProportion.split("%")[0])
          };
          objArr[0].list.push(dataObj1);
          objArr[1].list.push(dataObj2);
        }
        this.$set(this, "saleChartArr", objArr);
      }
    },
    // res：数据
    setPieOption(res) {
      var resData = this.solvePieOption();
      this.$set(this, "pieOption", resData.series);
    },
    solvePieOption() {
      var solveData = {};
      var data = this.partnerData;
      var yData = []; // 统计
      data.forEach(item => {
        var obj = {};
        if (item.plateName !== "小计" && item.plateName !== "总计") {
          obj.name = item.plateName;
          obj.value = item.proportion.slice(0, item.proportion.length - 1);
          yData.push(obj); // 比例
        }
      });

      solveData.series = yData;
      return solveData;
    },
    setPartnerOption() {
      var data = this.solveParnerData();
      var max = 0;
      var series = data.series;
      series.forEach((item, index) => {
        item.data.forEach(a => {
          if (Number(max) < Number(a)) {
            max = a;
          }
        });
      });
      var option = {};
      (option.tooltip = {
        trigger: "axis",
        textStyle: {
          fontSize: this.$utils.xyText
        }
      }),
        (option.color = [
          this.$utils.planColor,
          this.$utils.actualColor,
          this.$utils.sumColor,
          "#2677ae"
        ]);
      option.grid = {
        top: "10%",
        left: "5%",
        right: "5%"
      };
      (option.xAxis = [
        {
          type: "category",
          data: data.xAlisData,
          axisLine: {
            lineStyle: {
              color: this.chartsColor.line
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: this.$utils.xyText,
              color: this.chartsColor.text
            }
          },
          splitLine: {
            lineStyle: {
              color: this.chartsColor.line
            }
          }
        }
      ]),
        (option.yAxis = [
          {
            type: "value",
            name: "套",
            nameTextStyle: {
              fontSize: this.$utils.xyText,
              color: this.chartsColor.text
            },
            axisLabel: {
              textStyle: {
                fontSize: this.$utils.xyText,
                color: this.chartsColor.text
              }
            },
            axisLine: {
              lineStyle: {
                color: this.chartsColor.line
              }
            },

            splitLine: {
              lineStyle: {
                color: this.chartsColor.line
              }
            },
            max: max
          }
        ]),
        (option.legend = {
          data: this.parnerLegend,
          bottom: "-5",
          textStyle: {
            fontSize: this.$utils.xyText,
            color: this.chartsColor.text
          },
          selected: {
            保底销量: true,
            成交销量: true,
            统计量: true,
            统计量与保底销量差异: false
          }
        });
      option.series = data.series;
      this.partnerOption = option;
      this.$refs.saleChart.initChart();
    },
    solveParnerData() {
      var solveData = {};
      var data = this.partnerData;
      var xAlisData = [];
      var yData = []; // 保底销量
      var yData1 = []; // 成交销量
      var yData2 = []; // 统计量
      var yData3 = []; // 统计量与成交量差异
      var value = []; // value
      var series = [];
      var seriesItem = {};
      var seriesItem1 = {};
      var seriesItem2 = {};
      var seriesItem3 = {};
      data.forEach(item => {
        xAlisData.push(item.plateName);
        yData.push(item.baseSellingNum); // 保底销量
        yData1.push(item.dealNum);
        yData2.push(item.statisticsNum);
        yData3.push(item.theDifference);
      });
      // 保底销量
      (seriesItem.name = this.parnerLegend[0]),
        (seriesItem.type = "bar"),
        (seriesItem.barGap = 0.1),
        (seriesItem.barWidth = this.$utils.qChartH), // 柱图宽度
        (seriesItem.label = {
          normal: {
            show: true,
            position: "top",
            textStyle: {
              fontSize: this.$utils.xyText,
              color: this.chartsColor.text
            }
          }
        }),
        (seriesItem.itemStyle = {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: this.$utils.planColor
              },
              {
                offset: 1,
                color: this.$utils.planColor1
              }
            ])
          }
        }),
        (seriesItem.data = yData);
      // 成交销量
      (seriesItem1.name = this.parnerLegend[1]),
        (seriesItem1.type = "bar"),
        (seriesItem1.barWidth = this.$utils.qChartH), // 柱图宽度
        //  seriesItem1.stack= '套',
        (seriesItem1.label = {
          normal: {
            show: true,
            position: "top",
            textStyle: {
              fontSize: this.$utils.xyText,
              color: this.chartsColor.text
            }
          }
        }),
        (seriesItem1.itemStyle = {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: this.$utils.actualColor
              },
              {
                offset: 1,
                color: this.$utils.actualColor1
              }
            ])
          }
        }),
        (seriesItem1.data = yData1);
      // 统计量
      (seriesItem2.name = this.parnerLegend[2]),
        (seriesItem2.type = "bar"),
        (seriesItem2.barWidth = this.$utils.qChartH), // 柱图宽度
        (seriesItem2.stack = "套"),
        (seriesItem2.label = {
          normal: {
            show: true,
            position: "top",
            textStyle: {
              fontSize: this.$utils.xyText,
              color: this.chartsColor.text
            }
          }
        }),
        (seriesItem2.itemStyle = {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#d454fb"
              },
              {
                offset: 1,
                color: "#656cfa"
              }
            ])
          }
        }),
        (seriesItem2.data = yData2);
      // 统计量与保底销量差异
      (seriesItem3.name = this.parnerLegend[3]),
        (seriesItem3.barGap = 0.1),
        (seriesItem3.barWidth = this.$utils.qChartH), // 柱图宽度
        (seriesItem3.type = "bar"),
        //  seriesItem3.stack= '套',
        (seriesItem3.label = {
          normal: {
            show: true,
            position: "top",
            textStyle: {
              fontSize: this.$utils.xyText,
              color: this.chartsColor.text
            }
          }
        }),
        (seriesItem3.itemStyle = {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#329083"
              },
              {
                offset: 1,
                color: "#67c67c"
              }
            ])
          }
        }),
        (seriesItem3.data = yData3);
      series.push(seriesItem, seriesItem1, seriesItem2, seriesItem3);
      solveData.series = series;
      solveData.xAlisData = xAlisData;
      return solveData;
    },
    combineCell(list) {
      for (field in list[0]) {
        var k = 0;
        while (k < list.length) {
          list[k][field + "span"] = 1;
          list[k][field + "dis"] = false;
          for (var i = k + 1; i <= list.length - 1; i++) {
            if (list[k][field] == list[i][field] && list[k][field] != "") {
              list[k][field + "span"]++;
              list[k][field + "dis"] = false;
              list[i][field + "span"] = 1;
              list[i][field + "dis"] = true;
            } else {
              break;
            }
          }
          k = i;
        }
      }
      return list;
    },
    setSaleScaleyOption() {
      var data = this.solveSaleScaleOption();
      var max = 0;
      var series = data.series;
      series.forEach((item, index) => {
        item.data.forEach(a => {
          if (Number(max) < Number(a)) {
            max = a;
          }
        });
      });
      var option = {};
      option.tooltip = {
        trigger: "axis"
        //  formatter:'销售比例：<br/>比例：{c}%<br/>成交比例：{c1}%<br/>统计比例：{c2}%',
      };
      option.color = [
        this.$utils.planColor,
        this.$utils.actualColor,
        "#3398DB"
      ];
      option.grid = {
        top: "10%",
        left: "5%",
        right: "13%"
      };
      option.xAxis = [
        {
          type: "category",
          data: data.xAlisData,
          axisLine: {
            lineStyle: {
              color: this.chartsColor.line
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: this.$utils.xyText,
              color: this.chartsColor.text
            }
          },
          splitLine: {
            lineStyle: {
              color: this.chartsColor.line
            }
          }
        }
      ];
      option.yAxis = [
        {
          type: "value",
          name: "%",
          nameTextStyle: {
            fontSize: this.$utils.xyText,
            color: this.chartsColor.text
          },
          axisLabel: {
            textStyle: {
              fontSize: this.$utils.xyText,
              color: this.chartsColor.text
            }
          },
          axisLine: {
            lineStyle: {
              color: this.chartsColor.line
            }
          },

          splitLine: {
            lineStyle: {
              color: this.chartsColor.line
            }
          },
          max: max
        }
      ];
      option.legend = {
        data: ["任务比例", "统计比例", "成交比例"],
        textStyle: {
          fontSize: this.$utils.xyText,
          color: this.chartsColor.text
        },
        bottom: "-5"
      };
      option.series = data.series;
      this.saleScaleOption = option;
    },
    solveSaleScaleOption() {
      var solveData = {};
      var data = this.partnerData;
      var xAlisData = [];
      var yData = []; // 比例
      var yData1 = []; // 成交比例
      var yData2 = []; // 统计比例
      var value = []; // value
      var series = [];
      var seriesItem = {};
      var seriesItem1 = {};
      var seriesItem2 = {};
      data.forEach(item => {
        xAlisData.push(item.plateName);
        yData.push(item.proportion.slice(0, item.proportion.length - 1)); // 比例
        yData1.push(
          item.dealProportion.slice(0, item.dealProportion.length - 1)
        ); // 成交比例
        yData2.push(
          item.statisticsProportion.slice(
            0,
            item.statisticsProportion.length - 1
          )
        ); // 统计比例
      });
      // 比例
      (seriesItem.name = "统计比例"),
        (seriesItem.type = "bar"),
        (seriesItem.markLine = {
          label: {
            normal: {
              formatter: "时间进度:{c}%",
              textStyle: {
                fontSize: this.$utils.xyText,
                color: this.chartsColor.text
              }
            }
          },
          lineStyle: {
            normal: {
              type: "dashed",
              color: "#41f1c9",
              width: 4
            }
          },
          data: [
            {
              yAxis: Number(this.scheduleNum).toFixed(2)
            }
          ]
        });
      (seriesItem.itemStyle = {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: this.$utils.planColor
            },
            {
              offset: 1,
              color: this.$utils.planColor1
            }
          ])
        }
      }),
        (seriesItem.barGap = 0.1),
        (seriesItem.barWidth = this.$utils.qChartH), // 柱图宽度
        (seriesItem.label = {
          normal: {
            show: true,
            position: "top",
            formatter: "{c}%",
            textStyle: {
              fontSize: this.$utils.xyText,
              color: this.chartsColor.text
            }
          }
        }),
        (seriesItem.data = yData2);
      // 成交比例
      (seriesItem1.name = "成交比例"),
        (seriesItem1.barWidth = this.$utils.qChartH), // 柱图宽度
        (seriesItem1.type = "bar"),
        (seriesItem1.label = {
          normal: {
            show: true,
            position: "top",
            formatter: "{c}%",
            textStyle: {
              fontSize: this.$utils.xyText,
              color: this.chartsColor.text
            }
          }
        }),
        (seriesItem1.itemStyle = {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: this.$utils.actualColor
              },
              {
                offset: 1,
                color: this.$utils.actualColor1
              }
            ])
          }
        }),
        (seriesItem1.data = yData1);
      // 统计比例
      (seriesItem2.name = "任务比例"),
        (seriesItem2.barWidth = this.$utils.qChartH), // 柱图宽度
        (seriesItem2.markLine = {
          label: {
            normal: {
              formatter: "时间进度"
            }
          },
          lineStyle: {
            normal: {
              type: "dashed"
            }
          },
          data: [
            {
              yAxis: 85
            }
          ]
        });
      (seriesItem2.type = "bar"),
        //  seriesItem1.stack= '套',
        (seriesItem2.label = {
          normal: {
            show: true,
            position: "top",
            formatter: "{c}%",
            textStyle: {
              fontSize: this.$utils.xyText,
              color: this.chartsColor.text
            }
          }
        }),
        (seriesItem2.data = yData2);

      series.push(seriesItem, seriesItem1);
      solveData.series = series;
      solveData.xAlisData = xAlisData;
      return solveData;
    },
    setSaleMoneyOption(res, optionName, unit) {
      //  var max = 0;
      //  var data = this.solveSaleMoneyOption();
      var xData = [];
      var xDataName = ["保底销售额", "实际销售额"];
      var allData = [];
      var unit = unit;
      var symbolClip = true;
      var max = 0;
      var length = 2;
      var legend = [];
      for (let i = 0; i < length; i++) {
        let data = {
          type: "bar",
          name: "",
          label: {
            normal: {
              show: true,
              position: "top",
              color: "#31cee6",
              textStyle: {
                fontWeight: "bold",
                fontFamily: "DIN Condensed Bold",
                fontSize: "22"
              }
            }
          },
          z: 10,
          //  symbolBoundingData: max,
          data: [],
          barWidth: 21
        };
        var legendItem = {
          name: "",
          textStyle: {
            color: "#31cee6",
            fontSize: 14,
            padding: [0, 10]
          }
        };
        data.name = xDataName[i];
        legendItem.name = xDataName[i];
        legend.push(legendItem);
        allData.push(data);
      }

      allData.forEach((dataItem, itemId) => {
        res.forEach((resItem, resId) => {
          if (itemId === 0) {
            xData.push(resItem.plateName);
          }
          switch (itemId) {
            case 0: // 保底销售额
              dataItem.data.push(
                resItem.baseSellingAmount === null
                  ? 0
                  : resItem.baseSellingAmount
              );
              break;
            default:
              // 实际销售额
              dataItem.data.push(
                resItem.dealAmount === null ? 0 : resItem.dealAmount
              );
              break;
          }
        });
      });
      var option = {
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 45,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        yAxis: {
          name: unit,
          nameGap: 30,
          nameTextStyle: {
            color: "#31cee6"
          }
        },
        legend: {
          data: legend,
          orient: "horizontal",
          top: "95%"
        },
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          formatter: params => this.$utils.formatterLine(res, params, unit)
        },
        grid: {
          bottom: "20%",
          left: "5%"
        },
        series: allData
      };
      this.$set(this, optionName, option);
    },
    solveSaleMoneyOption() {
      var solveData = {};
      var data = this.partnerData;
      var xAlisData = [];
      var yData = []; // 保底销售额
      var yData1 = []; // 实际销售额
      var value = []; // value
      var series = [];
      var seriesItem = {};
      var seriesItem1 = {};
      data.forEach(item => {
        xAlisData.push(item.plateName);
        yData.push(item.baseSellingAmount); // 保底销售额
        yData1.push(item.dealAmount); // 实际销售额
      });
      // 保底销售额
      (seriesItem.name = this.saleMoneyLegend[0]),
        (seriesItem.barGap = 0.1),
        (seriesItem.barWidth = this.$utils.qChartH), // 柱图宽度
        (seriesItem.type = "bar"),
        //  seriesItem.stack= '套',
        (seriesItem.label = {
          normal: {
            show: true,
            position: "top",
            textStyle: {
              fontSize: this.$utils.xyText,
              color: this.chartsColor.text
            }
          }
        }),
        (seriesItem.itemStyle = {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: this.$utils.planColor
              },
              {
                offset: 1,
                color: this.$utils.planColor1
              }
            ])
          }
        }),
        (seriesItem.data = yData);
      // 实际销售额
      (seriesItem1.name = this.saleMoneyLegend[1]),
        (seriesItem1.type = "bar"),
        (seriesItem1.barWidth = this.$utils.qChartH), // 柱图宽度
        //  seriesItem1.stack= '套',
        (seriesItem1.label = {
          normal: {
            show: true,
            position: "top",
            textStyle: {
              fontSize: this.$utils.xyText,
              color: this.chartsColor.text
            }
          }
        }),
        (seriesItem1.itemStyle = {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: this.$utils.actualColor
              },
              {
                offset: 1,
                color: this.$utils.actualColor1
              }
            ])
          }
        }),
        (seriesItem1.data = yData1);

      series.push(seriesItem, seriesItem1);
      solveData.series = series;
      solveData.xAlisData = xAlisData;
      return solveData;
    }
  },
  mounted() {
    this.chartsColor = this.$utils.getChartColor(this);
    this.fetchData();
  }
};
</script>

<style lang="scss">
@import "../../../../../styles/element-ui/table/zdgzTable.scss";
@import "../../../../../styles/element-ui/date/dateCircle.css";
@import "../../../../../styles/element-ui/radioBtn/radioBtnBlue.scss";
@import "../../../../../styles/pages/workDeployment/_quanyuanyingxiao";
</style>